<template>
  <div>
    <el-tree ref="treeRef" :data="list" show-checkbox node-key="roleId" :default-checked-keys="authority"
      :props="defaultProps" check-strictly />
    <el-button @click="changeAuthority">确认修改</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router'
import { ElTree } from 'element-plus'
import { getAuthorityList } from '@/request/api';
import { ListInit } from '@/type/authority';
const route = useRoute()
interface Params {
  id: string,
  authority: number[]
}
const params: Params = route.params as unknown as Params;
// const id = ref<number>(params.id)
const authority = ref<number[]>(params.authority)
const list = ref<ListInit[]>([]);
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: 'roleList',
  label: 'name'
}
const getAuthority = () => {
  getAuthorityList().then(res => {
    console.log(res);
    list.value = res.data;
  })
}
getAuthority()
const changeAuthority = () => {
  console.log('changeAuthority');
  console.log(treeRef.value?.getCheckedKeys().map(item => Number(item)).sort(function (a: number, b: number) {
    return a - b;
  }));
}
</script>

<style scoped>
</style>